<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>12306 模仿界面 首页</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/home_page.css">
</head>
<body>
<!-- 总容器-->
<div class="wrapper">
    <!-- header部分-->
    <div class="header">
        <img class="header_image" src="image/header.jpg"/>
    <div class="text-overlay">
        <div class="header_left">
            <div class="header_left_city" >
                嘉峪关<i class="i zondicons:cheveron-down"></i>
            </div>
            <div class="header_left_weather" >阴 31&#8451;</div>
        </div>
        <div class="search-box">
            <i class="i material-symbols:search-rounded"></i>
            退票须知
        </div>
        <div class="header_right">
            <i class="i ri:qr-scan-2-line"></i>
            <i class="i material-symbols:chat-outline"></i>
        </div>
    </div>
    </div>
    <div class="back">
        <!--查询车票-->
        <div class="chaxunchepiao">
            <div class="piao">
                <div class="huochepiao">
                    <div class="huochepiao1">火车票</div>
                    <div class="huochepiao2">—</div>
                </div>
                <div class="plane-bus">
                    <i class="i ion:plane"></i>飞机票
                </div>
                <div class="plane-bus">
                    <i class="i solar:bus-line-duotone"></i>汽车票
                </div>
            </div>
            <div class="choose_city">
                <div>西安</div>
                <i class="i material-symbols:change-circle-outline"></i>
                <div>嘉峪关</div>
            </div>
            <div class="piao_date">
                <div class="piao_date_1">7月9日</div>
                <div class="piao_date_2" >今天</div>
            </div>
            <button onclick="location.href='train_ticket.html'">查询车票</button>
            <div class="citytocity">
                <div>西安--嘉峪关</div>
                <div>昆明--西安</div>
                <div>昆明--嘉峪关</div>
                <div>| 清除历史</div>
            </div>
        </div>
        <ul class="types">
            <li>
                <img src="image/type%20(1).jpg">
                <p>餐饮&#8226;特产</p>
            </li>
            <li>
                <img src="image/type%20(2).jpg">
                <p>计次&#8226;定期票</p>
            </li>
            <li>
                <img src="image/type%20(3).jpg">
                <p>空铁联运</p>
            </li>
            <li>
                <img src="image/type%20(4).jpg">
                <p>酒店住宿</p>
            </li>
            <li>
                <img src="image/type%20(5).jpg">
                <p>出行保险</p>
            </li>
            <li>
                <img src="image/type%20(6).jpg">
                <p>中铁畅行卡</p>
            </li>
            <li>
                <img src="image/type%20(7).jpg">
                <p>铁路商城</p>
            </li>
            <li>
                <img src="image/type%20(8).jpg">
                <p>汽车票</p>
            </li>
            <li>
                <img src="image/type%20(9).jpg">
                <p>门票&#8226;旅游</p>
            </li>
            <li>
                <img src="image/type%20(10).jpg">
                <p>约车</p>
            </li>
            <li>
                <img src="image/type%20(11).jpg">
                <p>敬老版</p>
            </li>
            <li>
                <img src="image/type%20(12).jpg">
                <p>温馨服务</p>
            </li>
            <li>
                <img src="image/type%20(13).jpg">
                <p>时刻表</p>
            </li>
            <li>
                <img src="image/type%20(14).jpg">
                <p>铁路一卡通</p>
            </li>
            <li onclick="location.href='screen.html'" >
                <img src="image/type%20(15).jpg">
                <p>车站大屏</p>
            </li>
        </ul>
        <!--热门资讯部分-->
        <div class="remenzixun">
        <div class="remenzixunleft">
            <img class="remenzixunimg" src="image/热门资讯.jpg">
            <div class="remenzixunfont">
                <p>京沪高铁安全运营13周年！</p>
                <p style="color: #a29696">实干笃行书写高质量发展答卷</p>
            </div>
        </div>
        <div class="remenzixunright">
            &gt;
        </div>
        </div>
        <!--温馨服务部分-->
        <div class="wxfwandcard">
            <div class="wenxinfuwubox">
                <div class="wxfwtop">
                    <div class="wxfwleft">
                        <div class="remenzixunfont">
                            <p>温馨服务</p>
                            <p style="color: #a29696">优质服务 品质出行</p>
                        </div>
                    </div>
                    <div class="wenxfwright">
                        &gt;
                    </div>
                </div>
                <ul class="wxfwbottom">
                    <li>
                        <img src="image/wxfw%20(1).jpg">
                        <div>
                            <p>遗失物品查找</p>
                            <p style="color: #a29696 ">在线登记遗失物品</p>
                        </div>
                    </li>
                    <li>
                        <img src="image/wxfw%20(3).jpg">
                        <div><p>重点旅客预约</p>
                            <p style="color: #a29696 ">提前预约便捷出行</p></div>
                    </li>
                    <li>
                        <img src="image/wxfw%20(2).jpg">
                        <div><p>临时身份证明</p>
                            <p style="color: #a29696 ">电子乘车身份证明</p></div>

                    </li>
                </ul>
            </div>
            <div class="cardbox">
                <img src="image/card.jpg">
            </div>
        </div>

        <div class="tielushangcheng">
            <div class="tielushangchengtop">
                <p>铁路商城</p>
                <p style="color: #a29696">更多></p>
            </div>
            <ul class="tielushangchengbottom">
                <li>
                    <img src="image/铁路商城%20(3).jpg">
                    <p>掼蛋潮牌礼盒</p>
                </li>
                <li>
                    <img src="image/铁路商城%20(2).jpg">
                    <p>便携式开瓶器</p>
                </li>
                <li>
                    <img src="image/铁路商城%20(1).jpg">
                    <p>山东蒙阴水蜜桃</p>
                </li>
            </ul>
        </div>
        <div class="tielujx">
            <div class="tielujxtop">
                <p>铁路精选</p>
            </div>
            <div class="tielujxbottom">
              <img src="image/铁路精选.jpg">
            </div>
        </div>
    <div class="jiudian">
        <div class="jiudiantop">
            <p>酒店预定</p>
            <p style="color: #a29696">去领券，享更多优惠></p>
        </div>
        <ul class="jiudianbottom">
            <li>
                <img src="image/酒店%20(3).jpg">
                <div class="jiudianfont">
                    <h2 style="font-size: 3vw">星程酒店（嘉峪关大唐美...</h2>
                    <div class="jiudianfont1">
                        <p class="jiudianfont1_1">4.5</p>
                        <p class="jiudianfont1_2">分 很好</p>
                        <p class="jiudianfont1_3">586人住过</p>
                    </div>
                    <p style="font-size: 2.5vw">近雄关广场</p>
                    <div class="jiudianfont2">
                        <p class="jiudianfont2_1">&#165;246</p>
                        <p class="jiudianfont2_2">起</p>
                        <p class="jiudianfont2_3">已减63元</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="image/酒店%20(2).jpg">
                <div class="jiudianfont">
                    <h2 style="font-size: 3vw">如家精选酒店（嘉峪关迎...</h2>
                    <div class="jiudianfont1">
                        <p class="jiudianfont1_1">4.8</p>
                        <p class="jiudianfont1_2">分 很棒</p>
                        <p class="jiudianfont1_3">461人住过</p>
                    </div>
                    <p style="font-size: 2.5vw">近嘉峪关站</p>
                    <div class="jiudianfont2">
                        <p class="jiudianfont2_1">&#165;361</p>
                        <p class="jiudianfont2_2">起</p>
                        <p class="jiudianfont2_3">已减50元</p>
                    </div>
                </div>
            </li>
            <li>
                <img src="image/酒店%20(1).jpg">
                <div class="jiudianfont">
                    <h2 style="font-size: 3vw">维也纳3好酒店（嘉峪关...</h2>
                    <div class="jiudianfont1">
                        <p class="jiudianfont1_1">4.6</p>
                        <p class="jiudianfont1_2">分 很好</p>
                        <p class="jiudianfont1_3">737人住过</p>
                    </div>
                    <p style="font-size: 2.5vw">近富强市场</p>
                    <div class="jiudianfont2">
                        <p class="jiudianfont2_1">&#165;238</p>
                        <p class="jiudianfont2_2">起</p>
                        <p class="jiudianfont2_3">已减131元</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </div>


    <!--底部菜单部分-->
    <ul class="footer">
        <li onclick="location.href='home_page.html'">
            <i class="i ion:md-train" style="color: #3c97f9"></i>
            <p style="color: #3c97f9">首页</p>
        </li>
        <li onclick="location.href='mobility_service.html'">
            <i class="i material-symbols:checked-bag-outline"></i>
            <p>出行服务</p>
        </li>
        <li onclick="location.href='order.html'">
            <i class="i solar:document-outline"></i>
            <p>订单</p>
        </li>
        <li onclick="location.href='vip.html'">
            <i class="i mingcute:vip-1-line"></i>
            <p>铁路会员</p>
        </li>
        <li onclick="location.href='myself.html'">
            <i class="i ic:outline-person-outline"></i>
            <p>我的</p>
        </li>
    </ul>
</div>
</body>
</html>
